<article class="module-account module-account-myorder">
    <div class="ui-account-box">
        <h3 class="ui-title">{{$t('myOrder.myTrade')}}</h3>

        <loading v-if="isLoading === true"></loading>
        <div class="ui-account-box-inner" v-if="isLoading === false">
            <div class="m-tab-sub fn-mb20">
                <ul class="list fn-clearfix">
                    <li class="item" v-for="(item, $key) in symbols">
                        <a class="item-link" :class="{'item-link--active': symbol===item.symbol}"
                           @click="selectCoin(item)">
                            <span class="tab-text">
                                <img style="float: left;margin-right: 6px;" width="24px" :src="item.img" alt="">
                                <div class="text">{{item.assetCode2 + '/' + item.assetCode1}}</div>
                                <i class="triangle"></i>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="ui-account-box-inner">
            <h3 class="ui-title-account">{{$t('myOrder.openOrders')}}
                <input type="date" style="margin-left: 20px" v-model="present.startDate"> - <input type="date" v-model="present.lastDate"> <button type="button" class="date-btn" @click="preDateSel">查询</button>
            </h3>
            <div class="box-content">
                <div class="table-wrap">
                    <div class="m-table">
                        <table>
                            <thead>
                            <tr>
                                <th width="22%" class="fn-ta-left">{{$t('myOrder.orderTime')}}</th>
                                <th width="8%" class="fn-ta-left">{{$t('myOrder.type')}}</th>
                                <th width="12%" class="fn-ta-right">{{$t('myOrder.orderPrice')}}</th>
                                <th width="16%" class="fn-ta-right">{{$t('myOrder.orderAmount')}}</th>
                                <!--<th width="15%" class="fn-ta-right">成交数量</th>-->
                                <th width="15%" class="fn-ta-right">{{$t('myOrder.residualAmount')}}</th>
                                <th width="12%" class="fn-ta-right">{{$t('myOrder.operation')}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in tradeList.list"  v-if="tradeList.isLoading === false && tradeList.list.length > 0">
                                <td width="22%">{{item.createTime | timezone}}</td>
                                <td width="8%" v-html="item.tradeCoinTypeHtml"></td>
                                <td width="12%" class="fn-ta-right">{{item.priceText}}</td>
                                <td width="16%" v-html="item.numberHtml" class="fn-ta-right"></td>
                                <td width="15%" v-html="item.numberOverHtml" class="fn-ta-right"></td>
                                <td width="12%" class="fn-ta-right">
                                    <a href="javascript:;" @click="cancelOrder(item, $event)">{{$t('myOrder.cancel')}}</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <loading v-if="tradeList.isLoading"></loading>
                        <no-data v-if="tradeList.isLoading === false && tradeList.list.length === 0"></no-data>
                    </div>
                    <pager :page-no="tradeList.pageNo"
                           :page-size="tradeList.pageSize"
                           :on-page-change="changeTradePage"
                           :page-num="tradeList.pageNum"></pager>
                </div>
            </div>
        </div>
        <div class="ui-account-box-inner">
            <h3 class="ui-title-account">{{$t('myOrder.tradeHistory')}}
                <input type="date" style="margin-left: 20px" v-model="historys.startDate"> - <input type="date" v-model="historys.lastDate"> <button type="button" class="date-btn" @click="hiDateSel">查询</button>
            </h3>
            <div class="box-content">
                <div class="table-wrap">
                    <div class="m-table">
                        <table>
                            <thead>
                            <tr>
                                <th  style="width: 18%">{{$t('myOrder.orderTime')}}</th>
                                <th  style="width: 5%">{{$t('myOrder.type')}}</th>
                                <th  class="fn-ta-right" style="width: 12%">{{$t('myOrder.orderPrice')}}</th>
                                <th  class="fn-ta-right" style="width: 12%">{{$t('myOrder.avgPrice')}}</th>
                                <th  class="fn-ta-right" style="width: 14%">{{$t('myOrder.orderVolume')}}</th>
                                <th  class="fn-ta-right" style="width: 14%">{{$t('myOrder.tradingVolume')}}</th>
                                <th  class="fn-ta-right" style="width: 15%">{{$t('myOrder.tradingTotal')}}</th>
                                <th  class="fn-ta-right" style="width: 10%">{{$t('myOrder.status')}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in tradeHistoryList.list"  v-if="tradeHistoryList.isLoading === false && tradeHistoryList.list.length > 0">
                                <td style="width: 18%">{{item.createTime | timezone}}</td>
                                <td style="width: 5% " v-html="item.tradeCoinTypeHtml"></td>
                                <td class="fn-ta-right" style="width: 12%">
                                    <!-- 市价 -->
                                    <span class="text" v-if="item.tradeCoinFlag === CONFIG.TRADE_FLAG_MARKET.KEY">Market Price</span>
                                    <!-- 限价 -->
                                    <span class="text" v-if="item.tradeCoinFlag === CONFIG.TRADE_FLAG_FIXED.KEY">{{filter.floorFixPrice(item.price, coinPrecision) +' '+ symbol.split('_')[0]}}</span>
                                </td>
                                <td class="fn-ta-right" style="width: 12%">{{filter.floorFixPrice(item.averagePrice, coinPrecision) +' '+ symbol.split('_')[0]}}</td>
                                <td class="fn-ta-right" style="width: 14%">
                                    <!-- 市价 -->
                                    <template v-if="item.tradeCoinFlag === CONFIG.TRADE_FLAG_MARKET.KEY">
                                        <!--卖出-->
                                        <span class="text" v-if="item.tradeCoinType == CONFIG.TRADE_TYPE_SELL.KEY">{{filter.floorFix(item.number,amountPrecision)+' '+coinText}}</span>
                                        <!--买入-->
                                        <span class="text" v-if="item.tradeCoinType == CONFIG.TRADE_TYPE_BUY.KEY">{{filter.floorFix(item.market, coinPrecision)+' '+symbol.split('_')[0]}}</span>
                                    </template>
                                    <!--限价-->
                                    <template v-if="item.tradeCoinFlag === CONFIG.TRADE_FLAG_FIXED.KEY">
                                        <span class="text">{{filter.floorFix(item.number,amountPrecision)}} {{coinText}}</span>
                                    </template>
                                </td>
                                <td class="fn-ta-right" style="width: 14%">{{filter.floorFix(item.tradedCoin,amountPrecision)+' '+coinText}}</td>
                                <td class="fn-ta-right" style="width: 15%">{{filter.floorFix(item.matchedMoney, coinPrecision)+' '+symbol.split('_')[0]}}</td>
                                <td class="fn-ta-right" style="width: 10%">
                                <span class="info" v-if="item.tradeCoinStatus === CONFIG.TRADE_STATUS_SUCCESS.KEY">
                                    {{CONFIG.TRADE_STATUS_SUCCESS[$i18n.locale]}}
                                </span>
                                    <!--状态是cancel，且numberOver的值不为空-->
                                    <!--去掉partical-->
                                    <span class="info" v-if="item.tradeCoinStatus === CONFIG.TRADE_STATUS_CANCEL.KEY && item.matchedMoney > 0">
                                    {{CONFIG.TRADE_STATUS_SUCCESS[$i18n.locale]}}
                                </span>
                                    <span class="info" v-if="item.tradeCoinStatus === CONFIG.TRADE_STATUS_CANCEL.KEY && item.matchedMoney === 0">
                                    {{CONFIG.TRADE_STATUS_CANCEL[$i18n.locale]}}
                                </span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <loading v-if="tradeHistoryList.isLoading"></loading>
                        <no-data v-if="tradeHistoryList.isLoading === false && tradeHistoryList.list.length === 0"></no-data>
                    </div>
                    <pager :page-no="tradeHistoryList.pageNo"
                           :page-size="tradeHistoryList.pageSize"
                           :on-page-change="changeTradeHistoryListPage"
                           :page-num="tradeHistoryList.pageNum"></pager>
                </div>
            </div>
        </div>
    </div>

</article>
